function Lbt(el, options = {}) {
    this.el = document.querySelector(el)

    this.num = 1
    this.options = options
    this.time = null
    this.init()
}

Lbt.prototype.init = function() {
    this.imgChange()
    this.circlestyle()
    this.circletb()
    this.stop()
}

Lbt.prototype.circlestyle = function() {
    let circlelis = this.el.querySelectorAll('li')
    circlelis.forEach(element => {
        element.style.background = this.options.color
    });
}
Lbt.prototype.imgChange = function() {
    this.time = setInterval(() => {

        console.log(this);
        this.num++
            if (this.num > 6) this.num = 1
        let picImg = this.el.querySelector("img")
        picImg.src = `./imgs/img${this.num}.jpg`
        this.circletb()

    }, 1000);

    Lbt.prototype.circletb = function() {
        let circlelis = this.el.querySelectorAll('li')
        circlelis.forEach((ele, index) => {
            ele.className = ''
        })
        circlelis[this.num - 1].className = 'active'
    }
    Lbt.prototype.stop = function() {
        let circlelis = this.el.querySelectorAll('li')
        circlelis.forEach((eles, index) => {
            eles.onmouseover = () => {
                clearInterval(this.time)
                let picImg = this.el.querySelector("img")
                picImg.src = `./imgs/img${(index+1)}.jpg`
                let circlelis = this.el.querySelectorAll('li')
                circlelis.forEach((ele, index) => {
                    ele.className = ''
                })
                circlelis[index].className = 'active'
                this.num = index
            }
            eles.onmouseout = () => {
                this.imgChange()
            }
        })
    }

}